<template>
	<view class="home">
		<!-- 地图及搜索框 -->
		<view class="home_top">
			<view class="home_top_map" @tap="getarea">
				{{ nowcity }}
				<i class="icon">&#xe649;</i>
			</view>
			<!-- @tap="tosearch" -->
			<view class="home_top_search">
				<input class="uni-input" placeholder-class="place" v-model="searchcontant" @input="searchinput" placeholder="输入名称进行搜索" />
				<image class="icon_search" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/search_icon.png" mode=""></image>
				<view class="err" @click="clearinput"><i class="icon icon_error" v-if="inputflag">&#xe66f;</i></view>
			</view>
			<view class="home_top_right" @click="searchActive" v-if="inputflag">搜索</view>
		</view>
		<home-filter @change="changeFilter"></home-filter>
		<!-- <sl-filter :independence="true" :menuList="menuList_fl"></sl-filter> -->
		<tip-list :tipList="tipList" @todetail="todetail" :more="showLoadMore"></tip-list>
		<!-- 登录按钮 -->
		<uni-popupl ref="login" type="bottom">
			<button class="buttom_bottom" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">
				<image class="pop_login" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/login.png" mode=""></image>
			</button>
		</uni-popupl>
		<!-- h5使用微信登录 -->
		<uni-popupl ref="login_h" type="bottom">
			<view class="pic_lo"><image @tap="oauth()" class="pop_login" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/login.png" mode=""></image></view>
		</uni-popupl>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
	</view>
</template>

<script>
import tipList from '@/components/index/tiplist.vue';
import uniPopupl from '@/components/uni-popuplogin/uni-popup.vue';
import homeFilter from '@/components/filter/home-filter.vue';
import slFilter from '@/components/sl-filter/sl-filter.vue';
import loading from '@/components/loading/loading.vue';
export default {
	components: { tipList, uniPopupl, homeFilter, slFilter, loading },
	data() {
		return {
			loadflag: true,
			nowcity: '',
			// 活动列表
			showLoadMore: false,
			tipList: [],
			searchcontant: '', //搜索框内容
			inputflag: false, //控制搜索按钮
			selecetNavIndex: null,
			menuList_index: 0,
			// 赛选内容
			detail_index: [],
			filterFrom: {
				type: '',
				multi: '',
				time_key: '',
				distance: ''
			},
			SessionKey: '',
			OpenId: '',
			nickName: null,
			avatarUrl: null,
			isCanUse: uni.getStorageSync('isCanUse'), //默认为true
			// 赛事活动下标
			border_index: 0,
			// 当前页数
			currentpage: 1,
			// 最后一页
			last_page: '',
			// 判断下拉刷新还是上拉加载 的状态
			up_down: false
		};
	},
	onReachBottom() {
		this.up_down = false;
		if (this.currentpage == this.last_page) {
			this.toast('没有更多活动了');
			return;
		}
		// this.toast('活动加载中');
		uni.showLoading({
			title: '活动加载中'
		});
		this.currentpage++;
		this.getactiveList();
	},
	onLoad() {
		const userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			this.$refs.login.close();
			uni.showTabBar({});
		}
		this.getloaction();
	},
	onShow() {
		const City = uni.getStorageSync('temporary');
		if(this.nowcity != City ) {
			this.nowcity = City;
			this.loadflag = true;
			this.currentpage = 1;
			this.tipList = [];
			this.getactiveList();
		}
	},
	mounted() {
		// 判断是小程序还是H5
		// this.judge();
		// 获取地理位置
		this.getactiveList();
		const userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			this.$refs.login.close();
			this.$refs.login_h.close();
			uni.showTabBar({});
		}
	},
	onPullDownRefresh() {
		// this.up_down = true
		this.runlist = [];
		this.currentpage = 1;
		this.getactiveList();
	},

	methods: {
		// 获取手机信息 判断是小程序  还是h5
		judge() {
			const res = uni.getSystemInfoSync();
			//  // console.log (res)
			// 运行在小程序中
			if (res.version) {
				this.login();
			} else {
				this.html_login();
			}
		},
		// 筛选条件的方法
		changeFilter(from) {
			(this.loadflag = true),
				// console.log (from)
				(this.filterFrom = from);
			(this.currentpage = 1), (this.tipList = []);
			this.getactiveList();
		},

		//获取CODE
		getUrlParam(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		},
		searchActive() {
			(this.loadflag = true), (this.currentpage = 1);
			this.tipList = [];
			this.getactiveList();
		},
		// 获取活动列表
		getactiveList() {
			this.ajax('active/activeIndexList', {
				data: {
					page: this.currentpage,
					search_name: this.searchcontant,
					type: this.filterFrom.type,
					multi: this.filterFrom.multi,
					time_key: this.filterFrom.time_key,
					distance: this.filterFrom.distance
				},
				success: res => {
					// console.log (res);
					if (this.up_down) {
						this.tipList = [];
					}
					uni.hideLoading();
					const nowTime = new Date().getTime();
					//  // console.log (nowTime)
					//  // console.log (res)
					var list = res.msg.data;
					this.last_page = res.msg.last_page;
					//  // console.log (nowTime);
					list.forEach(e => {
						e.start_time_begin = e.start_time.split(' ')[0];
						e.sign_up_start = e.sign_up_start.replace(/-/g, '/');
						e.sign_up_end = e.sign_up_end.replace(/-/g, '/');
						e.start_time = e.start_time.replace(/-/g, '/');
						e.end_time = e.end_time.replace(/-/g, '/');
						// 报名开始时时间戳
						var sing_start = new Date(e.sign_up_start).getTime();
						// 报名结束时间
						var sing_end = new Date(e.sign_up_end).getTime();
						// 活动开始时间
						var start_time = new Date(e.start_time).getTime();
						// 活动结束时间
						var end_time = new Date(e.end_time).getTime();
						if (nowTime < sing_start) {
							e.state = 2;
						} else if (nowTime > sing_start && nowTime < sing_end) {
							e.state = 0;
						} else if (nowTime > start_time && nowTime < end_time) {
							e.state = 4;
						} else if (nowTime > end_time) {
							e.state = 3;
						} else {
							e.state = 1;
						}
						//  // console.log (e.state);
						// 计算距离
						const distan = e.distance.toString();
						var dis = distan.split('.');
						e.distance_point_l = dis[0];
						e.distance_point_r = dis[1];
						//  // console.log (e)
					});
					uni.hideLoading();
					this.tipList = this.tipList.concat(res.msg.data);
					uni.stopPullDownRefresh();
					this.$forceUpdate();
					this.loadflag = false;
				}
			});
		},
		// 判断有没有授权过
		authorization() {
			const userinfo = uni.getStorageSync('userinfo');
			 // console.log (userinfo);
			if (userinfo) {
				// uni.switchTab({
				// url:'/pages/index/index'
				// })
				this.$refs.login.close();
			}
		},
		login() {
			this.$refs.login.open();
			uni.hideTabBar({});
		},
		getUserInfo(res) {
			// console.log (res);
			if (!res.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					icon: 'none'
				});
				return false;
			} else {
				uni.setStorageSync('userinfo', res.detail.rawData);
				uni.showLoading({});
				setTimeout(() => {
					uni.hideLoading();
					this.$refs.login.close();
					// uni.switchTab({
					// 	url:'/pages/index/index'
					// })
					uni.showTabBar({});
				}, 1000);
			}
		},
		// 获取当前地理位置信息
		getloaction() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					const longitude = res.longitude;
					const latitude = res.latitude;
					uni.request({
						header: {
							'Content-Type': 'application/text'
						},
						url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + longitude + ',' + latitude + '&key=57909c51d546cb0c11d85a5737cc8588',
						success: re => {
							console.log(re);
							if (re.statusCode === 200) {
								console.log(111)
								this.nowcity = re.data.regeocode.addressComponent.city;
								uni.setStorageSync('temporary',this.nowcity)
							} else {
								// this.toast('地址获取失败');
								// uni.navigateTo({
								// 	url: '/pageA/choosecity/city'
								// });
							}
						}
					});
				},
				fail: function (){
					// uni.navigateTo({
					// 	url: '/pageA/choosecity/city'
					// });
				}
			});
		},
		selectdetail(items, key) {
			this.loadflag = true;
			this.menuList[this.selecetNavIndex].detaillist.forEach(item => {
				item.flag = false;
			});
			this.menuList[this.selecetNavIndex].detaillist[key].flag = !this.menuList[this.selecetNavIndex].detaillist[key].flag;
			this.detail_index = items.value;
			this.menuList_index = 0;
			// 设置标题上的文字
			this.menuList[this.selecetNavIndex].title = items.title;
			if (!key) {
				if (this.menuList[this.selecetNavIndex].key == '1-1') {
					this.menuList[this.selecetNavIndex].title = '综合';
				} else if (this.menuList[this.selecetNavIndex].key == '2-2') {
					this.menuList[this.selecetNavIndex].title = '类型';
				} else if (this.menuList[this.selecetNavIndex].key == '3-3') {
					this.menuList[this.selecetNavIndex].title = '时间';
				} else {
					this.menuList[this.selecetNavIndex].title = '距离';
				}
			}
		},
		// 跳到详情页
		todetail(e) {
			uni.navigateTo({
				url: '/pageA/competiondetail/competitiondetail?id=' + e
			});
		},
		clearinput() {
			this.searchcontant = '';
			this.inputflag = false;
		},
		// 搜索框控制搜索按钮及清除
		searchinput() {
			this.inputflag = true;
		},
		// 下拉筛选
		select(key, index) {
			this.selecetNavIndex = index;
			if (this.menuList_index == key) {
				this.menuList_index = 0;
				return;
			}
			this.menuList_index = key;
		},

		// 去往筛选页面
		toscreen() {
			uni.navigateTo({
				url: '/pageA/screen/screen'
			});
		},
		// 查看地图信息
		getarea() {
			uni.navigateTo({
				url: '/pageA/choosecity/city'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}
</style>

<style lang="less" scoped>
@import url('../../static/less/index.less');
</style>
